<template>
  <div class="body">
    <el-row class="mb8">
      <el-col :span="19">
        <el-button
          type="info"
          @click="shuaxin"
          icon="el-icon-refresh-right"
        ></el-button>
        <!-- <el-button type="success" @click="handleAdd">添加</el-button> -->
      </el-col>
      <el-col :span="5" class="seach">
        <el-input
          v-model="params.biddingProjectName"
          placeholder="请输入采购项目名称"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="shuaxin"
        ></el-button>
      </el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      :data="bidlist"
      tooltip-effect="dark"
      class="table xinde"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <!-- <el-table-column prop="proid" label="序号" width="150"></el-table-column> -->
      <el-table-column
        prop="biddingNumber"
        align="center"
        label="项目编号"
        show-overflow-tooltip
        width="220"
      ></el-table-column>
      <el-table-column
        prop="biddingProjectNumber"
        align="center"
        label="包号"
        show-overflow-tooltip
        width="220"
      ></el-table-column>
      <el-table-column
        prop="biddingProjectName"
        show-overflow-tooltip
        width="220"
        align="center"
        label="采购项目名称"
      ></el-table-column>
      <el-table-column
        prop="biddingType"
        align="center"
        label="采购方式"
        show-overflow-tooltip
        width="80"
      ></el-table-column>
      <el-table-column
        prop="bidderNoticeTime"
        align="center"
        label="招标公告发布日期"
        show-overflow-tooltip
        width="220"
      >
        <!-- <template slot-scope="scope">{{
          scope.row.bidderNoticeTime | dateFormat
        }}</template> -->
      </el-table-column>
      <el-table-column
        prop="reviewTime"
        align="center"
        label="评审日期"
        show-overflow-tooltip
        width="220"
      >
        <!-- <template slot-scope="scope">{{
          scope.row.reviewTime | dateFormat
        }}</template> -->
      </el-table-column>
      <!-- <el-table-column prop="content" align="center" label="采购需求内容" width="130"></el-table-column> -->
      <el-table-column
        prop="marginAmount"
        align="center"
        label="预算金额"
        show-overflow-tooltip
        width="150"
      ></el-table-column>
      <el-table-column
        prop="unifyCode"
        align="center"
        label="公司统一社会信用代码"
        show-overflow-tooltip
        width="220"
      ></el-table-column>
      <el-table-column
        prop="companyName"
        align="center"
        show-overflow-tooltip
        label="公司名"
        width="220"
      ></el-table-column>
      <el-table-column
        prop="source"
        align="center"
        label="信息来源"
        show-overflow-tooltip
        width="220"
      ></el-table-column>
      <el-table-column
        align="center"
        label="资金来源"
        show-overflow-tooltip
        width="120"
      >
        <template slot-scope="scope">{{
          scope.row.moneysource == 0
            ? "政府资金"
            : scope.row.moneysource == 1
            ? "自筹资金"
            : "其他自己资金"
        }}</template>
      </el-table-column>
      <el-table-column fixed="right" width="140" align="center" label="操作">
        <template slot-scope="scope">
          <el-button @click="details(scope.row)" type="text" size="small"
            >查看详情</el-button
          >
          <el-button type="text" size="small" @click="skipRoute(scope.row)"
            >申请保函</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增或修改 -->

    <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
      <!-- form //测试 -->
      <el-form ref="form" :model="form" :rules="rules" label-width="160px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="采购项目编号">
              <el-input v-model="form.bidding_number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="包号">
              <el-input v-model="form.bidding_project_number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购项目名称">
              <el-input v-model="form.bidding_project_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购方式">
              <el-input v-model="form.bidding_type"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="招标公告发布日期">
              <el-date-picker
                value-format="timestamp"
                v-model="form.bidder_notice_time"
                type="date"
                placeholder="选择日期时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评审日期">
              <el-date-picker
                value-format="timestamp"
                v-model="form.review_time"
                type="date"
                placeholder="选择日期时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购内容">
              <el-input v-model="form.content"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标段名称">
              <el-input v-model="form.bidding_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="中标金额">
              <el-input v-model="form.margin_amount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称">
              <el-input v-model="form.company_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="信息来源">
              <el-select v-model="form.source" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资金来源">
              <el-select v-model="form.moneysource" placeholder="请选择">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="button">
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog :title="title" :visible.sync="open1" width="60%" append-to-body>
      <el-form
        ref="form"
        :disabled="true"
        :model="form"
        :rules="rules"
        label-width="130px"
      >
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="项目编号:">
              <el-input
                v-model="formData.bidding_number"
                placeholder="请输入项目编号:"
                show-word-limit
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="130px" label="采购项目名称：">
              <el-input
                v-model="formData.bidding_project_name"
                placeholder="请输入采购项目名称："
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="130px" label="采购方式：">
              <el-input
                v-model="formData.bidding_type"
                placeholder="请输入采购方式："
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="130px" label="预算金额：">
              <el-input
                v-model="formData.margin_amount"
                placeholder="请输入预算金额："
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="130px" label="包号：">
              <el-input
                v-model="formData.bidding_project_number"
                placeholder="请输入包号："
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="统一信用代码：">
              <el-input
                v-model="formData.unify_code"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label-width="130px" label="公司名称：">
              <el-input
                v-model="formData.company_name"
                placeholder="暂无数据"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="bottom">
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label">采购需求</span>
            {{ formData.content }}
          </el-tab-pane>
          <!-- <el-tab-pane label="申请人资格需求">{{formData.qualification}}</el-tab-pane> -->
          <el-tab-pane label="时间地点">
            <p>添加时间：{{ formData.create_time | dateFormat }}</p>
          </el-tab-pane>
          <!-- <el-tab-pane label="采购人资料">
              <el-row :gutter="15">
                <el-form
                  :disabled="true"
                  ref="elForm"
                  :model="formData"
                  :rules="rules"
                  size="medium"
                  label-width="100px"
                >
                  <el-col :span="12">
                    <el-form-item label-width="180px" label="采购人名称：" prop="purchase_person_name">
                      <el-input
                        v-model="formData.purchase_person_name"
                        placeholder="请输入采购人名称："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label-width="180px" label="采购人地址:" prop="purchase_person_addr">
                      <el-input
                        v-model="formData.purchase_person_addr"
                        placeholder="请输入采购人地址:"
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label-width="180px"
                      label="采购人联系人："
                      prop="purchase_person_contact_name"
                    >
                      <el-input
                        v-model="formData.purchase_person_contact_name"
                        placeholder="请输入采购人联系人："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label-width="180px"
                      label="采购人联系方式："
                      prop="purchase_person_contact_mobile"
                    >
                      <el-input
                        v-model="formData.purchase_person_contact_mobile"
                        placeholder="请输入采购人联系方式："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label-width="180px" label="采购代理机构名称：" prop="purchase_agent_name">
                      <el-input
                        v-model="formData.purchase_agent_name"
                        placeholder="请输入采购代理机构名称："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label-width="180px" label="采购代理机构地址：" prop="purchase_agent_addr">
                      <el-input
                        v-model="formData.purchase_agent_addr"
                        placeholder="请输入采购代理机构地址："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label-width="180px"
                      label="采购代理机构联系人："
                      prop="purchase_agent_person"
                    >
                      <el-input
                        v-model="formData.purchase_agent_person"
                        placeholder="请输入采购代理机构联系人："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label-width="180px"
                      label="采购代理机构联系方式："
                      prop="purchase_agent_mobile"
                    >
                      <el-input
                        v-model="formData.purchase_agent_mobile"
                        placeholder="请输入采购代理机构联系方式："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
          </el-tab-pane>-->
        </el-tabs>
      </div>
    </el-dialog>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30]"
        :page-size="params.pageSize"
        :current-page.sync="params.pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { bid, addgongcheng, delgongcheng } from "@/api/bid";
export default {
  data() {
    return {
      open1: false,
      //页面
      bidlist: [],
      // 分页获取数据参数
      params: {
        pageSize: 10,
        pageNum: 1,
        biddingProjectName: "",
      },
      total: null,
      // 信息来源
      options: [
        {
          value: "系统",
          label: "系统",
        },
        {
          value: "新点",
          label: "新点",
        },
      ],
      // 资金来源
      options1: [
        {
          value: 0,
          label: "政府资金",
        },
        {
          value: 1,
          label: "自筹资金",
        },
        {
          value: 2,
          label: "其他资金",
        },
      ],
      formData: {},
      total: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      multipleSelection: [],
    };
  },
  created() {
    this.bids();
  },

  methods: {
    shuaxin() {
      // console.log(this.params.offset);
      this.params.offset = 0;
      this.bids();
    },
    skipRoute(uid) {
      let {
        biddingName,
        proid,
        biddingNumber,
        bidderNoticeTime,
        companyName,
        marginAmount,
        biddingProjectName,
        bidEndTime,
        bidBeginTime,
      } = uid;
      sessionStorage.setItem("proid", proid); //当前选择标段id存储后跳转下一不
      sessionStorage.setItem("projectid", proid);
      sessionStorage.setItem("bidding_name", biddingName); //当前选择标段id存储后跳转下一不
      sessionStorage.setItem("proid", proid); //保函id
      sessionStorage.setItem("bidding_name", biddingNumber); //项目编号
      sessionStorage.setItem("bidding_project_name", biddingProjectName); //开标日期开标时间
      sessionStorage.setItem("purchase_person_name", companyName); //招标人
      sessionStorage.setItem("bidder_notice_time", bidderNoticeTime);
      sessionStorage.setItem("bid_begin_time", bidBeginTime); //开标日期
      sessionStorage.setItem("bid_end_time", bidEndTime); //截止时间
      sessionStorage.setItem("margin_amount", marginAmount); //预算金额
      // sessionStorage.setItem("unify_code", this.gongcheng.unify_code); //申请公司统一社会信信用代码
      // sessionStorage.setItem("apply_company_name", this.valse); //申请公司统一社会信信用代码
      sessionStorage.setItem("proid", uid.proid);
      this.$router.push("/BidSecurity/SelectALot/");
      // this.$router.push({ path: '/BidSecurity/SelectALot/', query: { projectid: uid.proid }})
    },
    //页面
    bids() {
      // this.params.user_id = sessionStorage.getItem("user_id");
      bid(this.params).then((response) => {
        console.log(response);
        this.bidlist = response.data.rows;
        this.total = response.data.total;
      });
    },
    details(rows) {
      var bbc = JSON.stringify(rows);
      this.$router.push({ name: "zbxq", query: { params: bbc } });
      // this.open1 = true;
      // this.formData = rows;
    },
    // 表单重置
    reset() {
      this.form = {};
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    //新增按钮操作
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加档案架";
      this.bids();
    },
    //修改
    handleUpdate() {
      this.reset();
      this.open = true;
      this.title = "修改档案架";
      this.bids();
    },
    //提交按钮
    onSubmit() {
      // this.form.user_id = sessionStorage.getItem("user_id");
      addgongcheng(this.form).then((res) => {
        if (res.data.code == 1) {
          this.$message.success("添加成功");
          this.bids();
        } else {
          this.$message.error("网络异常,稍后再试");
        }
      });
      this.open = false;
    },
    del() {
      let arr = [];
      this.multipleSelection.forEach((item) => {
        arr.push(item.proid);
      });
      arr = arr.toString();
      console.log(arr);
      // let user_id = sessionStorage.getItem("user_id");
      delgongcheng({ ids: arr }).then((res) => {
        if (res.data.code == 1) {
          this.$message.success("删除成功");
          this.bids();
        } else {
          this.$message.error("网络异常,稍后再试");
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pageSize = val;
      this.bids();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.pageNum = val;
      // this.params.offset = parseInt(val - 1) * this.params.limit;
      this.bids();
    },
  },
};
</script>

<style scoped lang="scss">
.el-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.table {
  width: 100%;
  margin-top: 2vh;
}

.block {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.el-select {
  width: 100%;
}
</style>
